<script setup lang="ts">
import moment from "moment";
import EChart from "~/contentScripts/views/echart.vue";

const props = defineProps({
  activeTab: {
    type: Object,
    default: () => []
  },
});
// Echart 统计图
const chartOptions = ref<any>({
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: [],
  },
  toolbox: {
    feature: {
      saveAsImage: {
        name: '流量看板-流量总览统计图',
      },
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [], // 日期
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [],
});
/*
activeTab 数据
{ "dateType": "today", "dateRange": "2023-08-29|2023-08-29", "data": { "yesterday": { "itmUv": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 2, 0, 0, 1, 1, 0, 3, 1, 1, 1, 1, 2, 0 ] }, "today": { "itmUv": [ 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 3, 1 ] } }, "indexList": [ { "text": "昨日商品访客数", "value": "yesterday-itmUv", "format": "," }, { "text": "今日商品访客数", "value": "today-itmUv", "format": "," } ], "colorPanel": [ "#2062E6", "#F3D024", "#FF8533", "#4CB5FF", "#BC64E5", "#04C9A8", "#F75CA9", "#00CFCF", "#F85948" ], "fillColorPanel": [ "rgba(32, 98, 230, 0.08)", "rgba(242, 208, 36, 0.2)", "rgba(255, 133, 51, 0.25)", "rgba(76, 188, 255, 0.35)", "rgba(188, 100, 229, 0.35)", "rgba(4, 201, 168, 0.4)", "rgba(247, 92, 196, 0.4)", "rgba(0, 207, 207, 0.3)", "rgba(248, 89, 72, 0.3)" ], "axisTickLineStyle": false, "axisLineStyle": false, "axisTickStyle": { "dy": 4 }, "xAxisOptions": { "interval": "preserveStartEnd" }, "yAxisDomain": [ 0, "auto" ], "xAxisDataKey": "date", "xAxisMinTickGap": 30, "isHideXAxis": false, "legendIconType": "square", "activeDotStyle": { "stroke": "none", "r": 5 }, "hasLegend": true, "hasTooltip": true, "hasCursor": true, "hasLastPoint": false, "hasFirstPoint": true, "hasReferencePoint": false, "referencePointIndexList": [], "hasAnimation": true, "margin": { "top": 0, "left": 0, "right": 0, "bottom": 0 }, "chartOptions": { "stackOffset": "none" }, "graphicalType": "line", "isHideYAxis": false, "stackType": "none", "series": [ { "dataKey": "yesterday-itmUv", "type": "line", "yAxisGroup": "left", "stack": "none", "options": {} }, { "dataKey": "today-itmUv", "type": "line", "yAxisGroup": "left", "stack": "none", "options": {} } ], "yAxis": [ { "type": "left", "hide": false, "domain": [ 0, "auto" ], "options": {}, "tickOptions": {} } ], "tooltipItemSorter": true }
 */
const calcOptionsData = () => {
  if (!props.activeTab) return;
  if (!props.activeTab.data) return;
  let activeTabData = props.activeTab.data;
  const {data} = activeTabData;
  // 从indexList中获取legend Data
  chartOptions.value.legend.data = activeTabData.indexList.map((item: any) => item.text);
  // 从indexList中获取series 项目
  chartOptions.value.series = activeTabData.indexList.map((item: any) => {
    return {
      name: item.text,
      type: 'line',
      // stack: '总量',
      data: [],
      smooth: true,
    };
  });
  // 修改saveAsImage的名称
  chartOptions.value.toolbox.feature.saveAsImage.name = `流量看板-流量总览统计图[${props.activeTab.name}]`;
  if (activeTabData.dateType == 'today') {
    // 如果是统计今日数据  xAxis data 为 24小时 HH:mm格式
    chartOptions.value.xAxis[0].data = Array.from({length: 24}, (v, k) => `${k}:00`);
    // 向series中填充数据
    for (let i = 0; i < activeTabData.indexList.length; i++) {
      let key = activeTabData.indexList[i].value;
      key = key.split('-');
      if (key.length == 1) {
        chartOptions.value.series[i].data = format(data[key[0]], activeTabData.indexList[i].format);
      } else if (key.length == 2) {
        chartOptions.value.series[i].data = format(data[key[0]][key[1]], activeTabData.indexList[i].format);
      } else if (key.length == 3) {
        chartOptions.value.series[i].data = format(data[key[0]][key[1]][key[2]], activeTabData.indexList[i].format);
      }
    }
  } else {
    let dateRange = activeTabData.dateRange.split('|');
    let startDate = new Date(dateRange[0]);
    let endDate = new Date(dateRange[1]);
    // 遍历日期 填入xAxis data 并用moment格式化为日期格式 YYYY-MM-DD
    let xAxisData = [];
    // 如果开始日期和结束日期相同 根据数据数量 从结束日期往前推
    if (startDate.getTime() == endDate.getTime()) {
      let key = activeTabData.indexList[0].value;
      key = key.split('-');
      let d = [];
      if (key.length == 1) {
        d = data[key[0]];
      } else if (key.length == 2) {
        d = data[key[0]][key[1]];
      } else if (key.length == 3) {
        d = data[key[0]][key[1]][key[2]];
      }
      for (let i = 0; i < d.length; i++) {
        xAxisData.push(moment(endDate).format('YYYY-MM-DD'));
        endDate.setDate(endDate.getDate() - 1);
      }
      xAxisData.reverse();
    } else {
      while (startDate <= endDate) {
        xAxisData.push(moment(startDate).format('YYYY-MM-DD'));
        startDate.setDate(startDate.getDate() + 1);
      }
    }
    chartOptions.value.xAxis[0].data = xAxisData;
    // 向series中填充数据
    for (let i = 0; i < activeTabData.indexList.length; i++) {
      let key = activeTabData.indexList[i].value;
      key = key.split('-');
      if (key.length == 1) {
        chartOptions.value.series[i].data = format(data[key[0]], activeTabData.indexList[i].format);
      } else if (key.length == 2) {
        chartOptions.value.series[i].data = format(data[key[0]][key[1]], activeTabData.indexList[i].format);
      } else if (key.length == 3) {
        chartOptions.value.series[i].data = format(data[key[0]][key[1]][key[2]], activeTabData.indexList[i].format);
      }
    }
  }
}
const format = (data: any, format = '') => {
  let result = [];
  for (let i = 0; i < data.length; i++) {
    if (format == '.2%') {
      result.push((data[i] * 100).toFixed(2));
    } else if (format == '.2f') {
      result.push(data[i].toFixed(2));
    } else {
      result.push(data[i]);
    }
  }
  return result;
}
calcOptionsData();
watch(() => props.activeTab, () => {
  calcOptionsData();
}, {deep: true});
</script>

<template>
  <EChart :options="chartOptions" style="height: 300px;"/>
</template>

<style scoped>

</style>
